<template>
  <div class="My-brand pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>我的品牌
    </div>
    <div class="section">
      <div class="content" v-if="brand.brandAudit===1">
        <div class="con-box">
          <div class="top">
            <img v-lazy="info.logoImg" alt="" />
            <div class="right">
              <div class="title">{{ info.brandName }}</div>
              <div class="desc">{{ info.introduce }}</div>
            </div>
          </div>
          <div class="tongji-con flex-align">
            <div class="con-it">
              <div class="num">{{ info.manNum }}</div>
              <div class="title">男性人数</div>
            </div>
            <div class="line"></div>
            <div class="con-it">
              <div class="num">{{ info.girlNum }}</div>
              <div class="title">女性人数</div>
            </div>
          </div>
          <div class="brand-btn flex-center" style="background: linear-gradient(133deg, #fd7895 36%, #ffcdcd 100%);" @click="signOut()">退出品牌</div>
        </div>
      </div>
      <div class="content" v-if="brand.brandAudit===0">
        <div class="con-box">
          <div class="top">
            <img v-lazy="info.logoImg" alt="" />
            <div class="right">
              <div class="title">{{ info.brandName }}</div>
              <div class="desc">{{ info.introduce }}</div>
            </div>
          </div>
          <div class="tongji-con flex-align">
            <div class="con-it">
              <div class="num">{{ info.manNum }}</div>
              <div class="title">男性人数</div>
            </div>
            <div class="line"></div>
            <div class="con-it">
              <div class="num">{{ info.girlNum }}</div>
              <div class="title">女性人数</div>
            </div>
          </div>
          <div class="to-be-reviewed">
            <img src="../assets/img/daishenhe.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getBrand, signOutBrand } from "@/api/brand";
import { getPersonalInfo } from "@/api/users";
export default {
  data() {
    return {
      info: {},
      brand:{}
    };
  },
  created() {
    if (!localStorage.getItem("jyToken")) {
      return this.$router.replace({
        name: "Login",
        query: { dirUrlName: "MyBrand" },
      });
    }
    this.getBrand();
    this.getUserInfo();
  },
  methods: {
    getBrand() {
      let brandInfo = this.$route.query.brandInfo;
      if (brandInfo) {
        this.info = JSON.parse(brandInfo);
      }
    },
    // 获取个人信息（取其中的品牌信息）
    getUserInfo() {
      getPersonalInfo().then((res) => {
        console.log(res,"个人信息");
        if (res.code === 0) {
          this.brand = res.data
          this.info = res.data.fsBrandVO;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    signOut() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定退出该品牌吗？",
          confirmButtonText: "确定",
        })
        .then(() => {
          signOutBrand()
            .then((res) => {
              if (res.code == 0) {
                this.$toast("退出成功");
                this.$router.replace({ name: "JoinBrand" });
              } else {
                this.$toast(res.msg);
              }
            })
            .catch((err) => {
              this.$toast("操作失败，请稍后重试！");
            });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="less" scoped>
.My-brand {
  background: #f6f7f8;
  .content {
    padding: 16px 16px 20px;
    .con-box {
      padding: 14px;
      background: #fff;
      border-radius: 6px;
      .top {
        display: flex;
        img {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .right {
          margin-top: 10px;
          .title {
            font-size: 16px;
            color: #363a44;
          }
          .desc {
            font-size: 14px;
            font-weight: 400;
            color: #363a44;
            margin: 10px 0 20px;
          }
        }
      }
      .tongji-con {
        height: 68px;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0px 4px 20px 1px rgba(0, 0, 0, 0.05000000074505806);
        border-radius: 6px 6px 6px 6px;
        .con-it {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          .num {
            font-size: 16px;
            font-weight: 600;
            color: #363a44;
          }
          .title {
            font-size: 12px;
            color: #b3b5b9;
          }
        }
        .line {
          width: 1px;
          height: 30px;
          background: #e5e5e5;
        }
      }
      .brand-btn {
        width: 250px;
        height: 36px;
        background: #bcbcbc;
        border-radius: 20px;
        font-size: 14px;
        color: #ffffff;
        margin: 30px auto 0;
      }
    }
  }
}
.to-be-reviewed{
  display: flex;
  justify-content: center;
}
</style>
